<template>
  <div class="step-four">
    <!-- 经济性参数 -->
    <div class="section economic-params">
      <div class="section-title">经济性参数</div>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <div class="config-item">
            <span class="label">系统单瓦造价:</span>
            <el-input
              v-model="form.singleWattCost"
              type="number"
              size="small"
              class="number-input"
              style="width: 200px; margin: 0 10px"
              :readonly="readonly"
              @input="handleSingleWattCostChange"
            ></el-input>
            <span class="unit">元/Wh</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 性能参数 -->
    <div class="section performance-params">
      <div class="section-title">性能参数</div>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <div class="config-list">
            <!-- 可放电深度 -->
            <div class="config-item">
              <span class="label">可放电深度:</span>
              <el-input
                v-model="form.dischargeDepth"
                type="number"
                size="small"
                class="number-input"
                style="width: 200px; margin: 0 10px"
                :readonly="readonly"
                @input="handleDischargeDepthChange"
              ></el-input>
              <span class="unit">%</span>
            </div>

            <!-- 电池充放效率 -->
            <div class="config-item">
              <span class="label">电池充放效率:</span>
              <el-input
                v-model="form.batteryEfficiency"
                type="number"
                size="small"
                class="number-input"
                style="width: 200px; margin: 0 10px"
                :readonly="readonly"
                @input="handleBatteryEfficiencyChange"
              ></el-input>
              <span class="unit">%</span>
            </div>

            <!-- PCS效率 -->
            <div class="config-item">
              <span class="label">PCS效率:</span>
              <el-input
                v-model="form.pcsEfficiency"
                type="number"
                size="small"
                class="number-input"
                style="width: 200px; margin: 0 10px"
                :readonly="readonly"
                @input="handlePcsEfficiencyChange"
              ></el-input>
              <span class="unit">%</span>
            </div>

            <!-- 其他效率 -->
            <div class="config-item">
              <span class="label">其他效率:</span>
              <el-input
                v-model="form.otherEfficiency"
                type="number"
                size="small"
                class="number-input"
                style="width: 200px; margin: 0 10px"
                :readonly="readonly"
                @input="handleOtherEfficiencyChange"
              ></el-input>
              <span class="unit">%</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 损耗参数 -->
    <div class="section loss-params">
      <div class="section-title">损耗参数</div>
      <el-row :gutter="20" type="flex" justify="center">
        <el-col :span="12">
          <div class="config-item">
            <span class="label">自耗电量:</span>
            <el-input
              v-model="form.selfConsumptionElectricity"
              type="number"
              size="small"
              class="number-input"
              style="width: 200px; margin: 0 10px"
              :readonly="readonly"
              @input="handleSelfConsumptionElectricityChange"
            ></el-input>
            <span class="unit">KWh/天</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StepFour',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    stepOneId: {
      type: [Number, String],
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        singleWattCost: this.formData.stepFourData?.singleWattCost || '',
        dischargeDepth: this.formData.stepFourData?.dischargeDepth || '',
        batteryEfficiency: this.formData.stepFourData?.batteryEfficiency || '',
        pcsEfficiency: this.formData.stepFourData?.pcsEfficiency || '',
        otherEfficiency: this.formData.stepFourData?.otherEfficiency || '',
        selfConsumptionElectricity:
          this.formData.stepFourData?.selfConsumptionElectricity || ''
      }
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        if (newVal && newVal.stepFourData) {
          this.form.singleWattCost = newVal.stepFourData.singleWattCost || ''
          this.form.dischargeDepth = newVal.stepFourData.dischargeDepth || ''
          this.form.batteryEfficiency =
            newVal.stepFourData.batteryEfficiency || ''
          this.form.pcsEfficiency = newVal.stepFourData.pcsEfficiency || ''
          this.form.otherEfficiency = newVal.stepFourData.otherEfficiency || ''
          this.form.selfConsumptionElectricity =
            newVal.stepFourData.selfConsumptionElectricity || ''
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSingleWattCostChange() {
      this.updateFormData()
    },
    handleDischargeDepthChange() {
      this.updateFormData()
    },
    handleBatteryEfficiencyChange() {
      this.updateFormData()
    },
    handlePcsEfficiencyChange() {
      this.updateFormData()
    },
    handleOtherEfficiencyChange() {
      this.updateFormData()
    },
    handleSelfConsumptionElectricityChange() {
      this.updateFormData()
    },
    updateFormData() {
      this.$emit('update:form-data', {
        ...this.formData,
        stepFourData: {
          singleWattCost: this.form.singleWattCost
            ? Number(this.form.singleWattCost)
            : null,
          dischargeDepth: this.form.dischargeDepth
            ? Number(this.form.dischargeDepth)
            : null,
          batteryEfficiency: this.form.batteryEfficiency
            ? Number(this.form.batteryEfficiency)
            : null,
          pcsEfficiency: this.form.pcsEfficiency
            ? Number(this.form.pcsEfficiency)
            : null,
          otherEfficiency: this.form.otherEfficiency
            ? Number(this.form.otherEfficiency)
            : null,
          selfConsumptionElectricity: this.form.selfConsumptionElectricity
            ? Number(this.form.selfConsumptionElectricity)
            : null
        }
      })
    },
    // 获取第四步提交数据
    getSubmitData() {
      return {
        id: this.stepOneId ? Number(this.stepOneId) : null, // 必传，使用第一步返回的ID
        singleWattCost: this.form.singleWattCost
          ? Number(this.form.singleWattCost)
          : null,
        dischargeDepth: this.form.dischargeDepth
          ? Number(this.form.dischargeDepth)
          : null,
        batteryEfficiency: this.form.batteryEfficiency
          ? Number(this.form.batteryEfficiency)
          : null,
        pcsEfficiency: this.form.pcsEfficiency
          ? Number(this.form.pcsEfficiency)
          : null,
        otherEfficiency: this.form.otherEfficiency
          ? Number(this.form.otherEfficiency)
          : null,
        selfConsumptionElectricity: this.form.selfConsumptionElectricity
          ? Number(this.form.selfConsumptionElectricity)
          : null
      }
    },
    // 重置第四步数据（当第一步重新保存时调用）
    resetStepFourData() {
      this.form.singleWattCost = ''
      this.form.dischargeDepth = ''
      this.form.batteryEfficiency = ''
      this.form.pcsEfficiency = ''
      this.form.otherEfficiency = ''
      this.form.selfConsumptionElectricity = ''
      this.updateFormData()
    }
  }
}
</script>

<style lang="scss" scoped>
.step-four {
  .section {
    margin-bottom: 30px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  .config-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      min-width: 120px;
      font-size: 14px;
      color: #606266;
      margin-right: 10px;
    }

    .unit {
      color: #909399;
      font-size: 14px;
    }
  }

  .config-list {
    display: flex;
    flex-direction: column;
  }

  // 隐藏数字输入框的上下箭头
  .number-input {
    ::v-deep .el-input__inner {
      // 隐藏 WebKit 浏览器的上下箭头
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
      }
      // 隐藏 Firefox 的上下箭头
      -moz-appearance: textfield;
      appearance: textfield;
    }
  }
}
</style>
